<template>
    <div class="treams">
        <ul class="tabs flex">
            <li :class="{'active':tabIndex == 0}" @click="changeTab(0)"><span>所有团队</span></li>
            <li :class="{'active':tabIndex == 1}" @click="changeTab(1)"><span>一级</span></li>
            <li :class="{'active':tabIndex == 2}" @click="changeTab(2)"><span>二级</span></li>
        </ul>
        <div class="list" v-for="(item, index) in dataList">
            <tream-list
                :date="item.createtime"
                :logo="item.avatar"
                :name="item.username"
                :tel="item.mobile"
            ></tream-list>
        </div>
    </div>
</template>

<script>
    import TreamList from "@/components/treamList"
    export default {
        name: "treams",
        components:{TreamList},
        data(){
            return {
                tabIndex:0,
                logo: require('../../assets/img/banner.png'),
                dataList:[]
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            getData(index = 0){
                this.$http.post('user/myTeam',{
                    num:index
                }).then(res=>{
                    console.log(res)
                    this.dataList  = res.data
                })
            },
            changeTab(index){
                this.tabIndex = index;
                this.getData(index)
            }
        }
    }
</script>

<style scoped lang="less">
    .treams{
        padding-bottom: 40px;
        .tabs{
            padding: 20px 20px 0;
            background: white;
            li{
                width: calc(100%/3);
                text-align: center;
                font-size: 30px;
                color: #333333;
                span{
                    display: inline-block;
                    padding-bottom: 20px;
                    height: 63px;
                    box-sizing: border-box;
                }
            }
            .active span{
                border-bottom: 4px solid #185fff;
            }
        }
        .list{
            padding:0  30px;
            background: white;
            margin-bottom: 2px;
        }
    }
</style>
